<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            text-align: center;
            line-height: 300px;
            border-radius: 35px;
            background-color: cornflowerblue;
        }
    </style>
</head>

<body>
    <button>点击懒加载</button>
    <!-- 要改type -->
    <script type="module">
        // 使用ESM : 1.保证文件通过服务器打开 2.type="module" 3.会自动开启严格模式
        // 1.直接引入
        import './ESM模块化/a.js';

        // 不能直接拿到模块里面的变量
        // console.log(a);

        // 2.按需导入和导出
        // 名字必须一致
        // import {c,d} from './ESM模块化/a.js';
        // console.log(c);
        // console.log(d);

        // // 给接受的变量起别名,as关键字
        // import {obj as me} from './ESM模块化/a.js';
        // console.log(me);

        // // 要在a里面导出getA
        // import {getA} from './ESM模块化/a.js';
        // console.log(getA,getA());

        // // 控制台会自动打印
        // import {fn} from './ESM模块化/a.js';
        // fn()

        // 3.默认的导入和导出
        // 默认导入可以自定义变量名
        // me对应的是export default
        import me, { c, d } from './ESM模块化/a.js'
        // 解构
        console.log(me);
        let { name, age } = me
        console.log(name, age);
        console.log(c, d);

        // 4.懒加载
        // document.querySelector('button').addEventListener('click', function () {
        //     // import('./ESM模块化/lazy.js')
        //     import('./ESM模块化/lazy.js').then(res => {
        //         //这里的res就lazy中的导出的内容
        //         console.log(res);
        //         console.log(res.default);//打印lazy,lazy是默认输出
        //         console.log(res.num);//打印num
        //     })
        // })
    </script>
</body>

</html>